Tabs Guidelines 選項卡指導規則

Usage 用法

標籤可以把相關的內容分組顯示在同一層級中。

標籤可以包含圖示和文字。文字標籤應該簡短

有兩種型別的標籤頁：

Primary tabs 主標籤頁

Secondary tabs 次標籤頁

主標籤頁在頁面最上方顯示，就在應用欄的下面。它們幫助使用者找到主要內容。二級標籤則在內容區域裡使用，用來把相似的內容分成小組。

1 Primary tabs 2 Secondary tabs

Related content 相關內容

使用標籤頁來組織相關內容，而非順序內容。

用標籤頁把相似的內容分組，讓內容更容易找到。

如果內容需要按順序閱讀，不要用標籤頁，應該用段落和空白來區分層次。

Anatomy 結構

1 Container 2 Icon (optional) 3 Badge (optional) 4 Label 5 Divider 6 Active indicator

Container 容器

容器裡可以放多個標籤頁。內容可以固定不動，也可以滾動檢視。容器會佔滿整個視窗的寬度，每個標籤頁佔據相等的空間。底部有一條線，用來和下面的內容分開。使用者可以把內容往下滾動檢視。

容器是指直接包含標題下方選項卡的區域

Icon (optional) 圖示（可選）

圖示要能清楚顯示這個標籤頁的內容是什麼，越簡單越好。

標籤頁可同時使用標籤和圖示。

圖示配合文字標籤會更容易理解。不建議只用圖示，因為單獨的圖示可能讓人不清楚具體含義。

✓ 使用全球公認的圖示

× 在所有標籤頁中保持一致的樣式 - 如果一個標籤使用了圖示和文字的組合，其他標籤也要用相同的方式

Label 標籤

標籤文字要簡單明確地說明內容是什麼。標籤一般顯示在一行內。如果文字太長，可以用兩行顯示，或者讓標籤欄可以左右滾動來顯示完整內容。

標籤應該簡短明瞭。與上方的標題應有明確的關聯

在使用可滾動選項卡時，對於網頁和移動裝置，第一個可見選項卡應從裝置左側偏移 52dp。每個選項卡的寬度由其文字標籤的長度決定。避免在每個選項卡上使用不一致的內邊距。

✓ 把第一個可滾動標籤頁放在距左邊52dp的位置，這樣使用者就能看出還有更多標籤可以滾動檢視。

× 不建議把標籤文字截斷顯示，因為這樣會讓使用者難以理解標籤的完整含義。

Badges (optional) 徽章（可選）

徽章可以在選項卡上顯示提醒訊息。主選項卡和次選項卡都可以使用徽章。徽章裡的文字不能超過4個字元（包括"+"號）。當使用者看過相關內容後，徽章會自動更新數字或消失。

徽章用於突出顯示與特定標籤頁內容相關的通知

Active indicator 活動指示器

活動選項卡會用下劃線和不同顏色來突出顯示，這樣使用者就能輕鬆分辨出哪個選項卡正在使用。

使用不同顏色和下劃線來標記當前正在使用的選項卡

Choosing the tab type 選擇標籤型別

如果你只需要一層標籤，就用主標籤就好。需要兩層標籤時，就要加上二級標籤。二級標籤的樣式比較簡單，但作用和主標籤是一樣的。

標籤欄可以放在頁面頂部的應用欄下面，也可以放在頁面中的其他位置，比如卡片裡面。無論放在哪裡，標籤欄都會控制它下面的內容顯示。

Placement 放置位置

標籤按橫向排成一行，每個標籤顯示不同的相關內容。所有標籤都屬於同一個主題。如果使用二級標籤，它們要放在主標籤的下面。

二級標籤位於其他內容中，以幫助使用者瞭解更多詳細資訊

Responsive layout 響應式佈局

固定標籤的寬度要以最寬的標籤為準。標籤組要有合適的邊距，可以靠中間或靠左邊放置。建議最多使用四個標籤，因為太多標籤會讓頁面看起來太擠。

標籤的寬度可以根據其中包含的專案數量而增加

Behavior 行為

States 狀態

標籤頁預設是可以點選的，並且其中一個標籤會處於被選中的狀態。每個標籤頁在未選中和選中的狀態下，都能對滑鼠懸停、鍵盤選擇和點選做出反應。

啟用、懸停、聚焦和按下狀態

Fixed tabs 固定標籤

固定標籤會在頁面上顯示這一組的所有標籤。當你需要在不同但相關的內容之間快速切換時，固定標籤特別有用 - 比如在地圖上切換不同的出行方式。你可以透過兩種方式使用固定標籤：直接點選想要的標籤，或者在內容區域左右滑動來切換。

固定標籤可讓使用者檢視所有可能的可用內容型別

Tap a tab 點選標籤

透過點選它來導航到標籤。

Swipe within the content area在內容區域內滑動

要在標籤之間切換，使用者可以在內容區域內向左或向右滑動。

使用者可以快速在固定的標籤之間滑動來檢視相關內容

在內容區域放置其他可滑動內容（如互動式地圖或列表項）時要謹慎。

✓ 在使用標籤時，使用不同手勢方向

× 避免在帶有標籤UI內容區域放置可滑動的專案，因為使用者可能會錯誤的滑動了元件

Scrollable tabs 可滾動標籤頁

當螢幕顯示不下所有標籤時，就可以用可滾動標籤。這種標籤可以包含比較長的文字，也可以放更多標籤。在手機等觸屏裝置上用起來特別方便。

使用可滾動標籤和長標籤時，內邊距應保持不變

Scrolling content 滾動內容

標籤欄有兩種顯示方式：一種是始終固定在頁面頂部，另一種是會隨著頁面滾動隱藏。如果選擇隨頁面滾動隱藏的方式，當使用者往上滑動頁面時，標籤欄會自動重新顯示出來。

標籤可用於營造層次感

當你向下滾動頁面時，選項卡可以暫時隱藏。等你再次向上滾動時，選項卡就會重新顯示出來。

記住：選項卡和它所在的元件應該像一個整體一樣一起移動，不要讓選項卡單獨在頂部應用欄後面滾動。

Interaction & style 互動與樣式

Touch 觸控

點選按鈕時會顯示水波動畫效果，讓使用者知道按鈕已被點選。點選後，下方的選中條會移動到新位置，表示切換成功

Scrollable 可滾動

如果標籤太多放不下，螢幕會變成可以左右滑動的形式。這種設計在手機等觸屏裝置上特別好用。

使用者可以透過左右滑動或使用鍵盤上的方向鍵來切換不同標籤。

為了讓使用螢幕閱讀器的人更容易操作，標籤組不應該無限迴圈滾動。

選擇標籤的方法很簡單：點選它，或者用鍵盤的空格鍵或回車鍵。

Cursor 游標

當滑鼠移到按鈕上時，按鈕會改變外觀，提示使用者可以點選。點選按鈕時會出現水波紋動畫，同時下方的指示條會移動，這些效果都是為了讓使用者知道他們的操作已經生效。

Keyboard/Switch 鍵盤/開關

當使用標籤切換時，會出現焦點指示器，為使用者提供視覺提示，表明目標已被選中

當使用者在啟用狀態下透過空格鍵/回車鍵與所選標籤進行互動時，會被帶到一個新的目標頁面

在標籤選單中，使用者可以透過方向鍵/標籤鍵在選單項中切換，使用空格鍵/回車鍵選擇選單項，或使用標籤鍵退出啟用狀態

play_arrowKeyboard/Switch: Tab, Space/Enter, Arrow鍵盤/開關：Tab，空格/回車，箭頭